<!doctype html>
<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="mobile-web-app-capable" content="yes">

  <title>违章查询</title>  
  
  <link rel="stylesheet" href="/static/weixin/css/app.css">

  <link rel="stylesheet" href="/static/weixin/css/mobilescroll.css">
  
  <script src="/static/weixin/js/config.js"></script>

  <script src="/static/weixin/js/zarpemain.js"></script>


  <script src="/static/weixin/js/lib/mobiscroll_select_zh.js"></script>

  <script src="/static/weixin/js/ticketlookup.js"></script>

  <script>
    ons.ready(function() {
    });
  </script>
</head>

<body>
  <ons-modal var="app.modal">
    <ons-icon icon="gear" spin="true" style="line-height: 20px; vertical-align: middle;" ></ons-icon>
    <span style="line-height: 20px; font-size: 15px;">获取数据中。。。</span>
  </ons-modal>    
  <ons-navigator title="Navigation" var="ticketLookupNavigator">

    <ons-page ng-controller="basicTicketLookupController">

      <ons-list modifier="inset" style="margin-top: 10px" ng-style="headerStyle" class="ng-style:headerStyle">
        <ons-list-item class="mycar-section">
          <ons-row>
            <ons-col> 
              <img id="selectedCar" ng-src="{{selectedVehicle.vehicle_model_year.image}}" height="60px" width="120" alt="当前车辆"/>
              <div class="mycar-info" style="width:120px; padding: 10px 5px 10px 0; height:60px">
                <p style="text-align:right; line-height:22px">{{selectedVehicle.license_plate}}</p>
                <p style="text-align:right;font-size:0.6em; vertical-align: middle;line-height:16px; overflow:hidden; text-overflow: ellipsis;" ng-bind="selectedVehicle.fullName"></p>
              </div>
            </ons-col>
            <ons-col width="70px" class="car-switch">
              <div class="circle" ng-click="showCarsToSelect('selectcars.html')">
                <img ng-src="{{secondaryVehicle.vehicle_model_year.image}}" height="30px" width="60px" alt="其他车辆"/>
              </div>
            </ons-col>
          </ons-row>
        </ons-list-item>
      </ons-list>

      <ons-list modifier="inset" style="margin-top: 10px">
        <ons-list-item class="list__item--tappable list__item__line-height" modifier="chevron">
          <select id="province_select" ng-model="selectedProvince" style="width:100%" placeholder="查询省份" style="margin-top:8px; width: 100%;" ng-options="province.name for province in provinces" />
          <input id="province_select_dummyinput" type="text" placeholder="查询省份" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
        </ons-list-item>
  
        <ons-list-item class="list__item--tappable list__item__line-height" modifier="chevron"> 
          <select id="city_select" ng-model="selectedCity" style="width:100%" placeholder="查询城市" style="margin-top:8px; width: 100%;" ng-options="city.city_name for city in selectedProvince.cities" />
          <input id="city_select_dummyinput" type="text" placeholder="查询城市" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;" >
        </ons-list-item>
        
          
       
        <ons-list-item>
          <input id="plate_input" type="text" ng-model="hphm" placeholder="完整车牌号" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
        </ons-list-item>
        <ons-list-item ng-show="engineRequired">
          <input id="engineno_input" type="text" ng-model="engineno" placeholder="{{engineno_digits_required}}" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
        </ons-list-item>

        <ons-list-item ng-show="vinRequired">
          <input id="vin_input" type="text" ng-model="classno" maxlength="{{maxclassno}}" ng-minlength="minclassno" ng-maxlength="maxclassno" placeholder="{{vin_digits_required}}" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
        </ons-list-item>
        
        <ons-list-item  ng-show="registRequired">
          <input id="regist_input" type="text" ng-model="registno" placeholder="{{regist_digits_required}}" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
        </ons-list-item>
      </ons-list>

      <div class="content-padded" ng-class="{disappear:isCustomerBond}">
        <ons-row>
          <ons-col width="50%"  style="padding: 10px 5px 10px 1px">
            <ons-button modifier="large" style="margin: 0 auto; " ng-click="goToFile('bindme.html')">
              车主绑定
            </ons-button>
          </ons-col>
          <ons-col width="50%"  style="padding: 10px 1px 10px 5px">
            <ons-button modifier="large" style="margin: 0 auto;" ng-click="fetchTickets()">
              查询
            </ons-button>
          </ons-col>
        </ons-row>
      </div>

      <div class="content-padded" ng-class="{disappear:!isCustomerBond}">
        <ons-row>
          <ons-col width="100%"  style="padding: 10px 0px 10px 0px">
            <ons-button modifier="large" style="margin: 0 auto;" ng-click="fetchTickets()">
              查询
            </ons-button>
          </ons-col>
        </ons-row>
      </div>
    </ons-page>
  </ons-navigator>

    <ons-template id="selectcars.html">
      <ons-page ng-controller="SelectCarsController">
        <ons-toolbar>
          <div class="left"><ons-back-button>返回</ons-back-button></div>
        </ons-toolbar>
        <ons-list>
          <ons-list-item ng-repeat="v in vehicles" modifier="tappable">
            <label class="radio-button radio-button--list-item" >
              <img ng-src="{{v.vehicle_model_year.image}}" alt="vehicle_image" width="100" height="50" style="float:right"/>
              <input type="radio" name="b" ng-checked="v.id == selectedV.id"  ng-click="selectVehicle(v, $event)">
              <div class="radio-button__checkmark radio-button--list-item__checkmark"></div>
              {{ v.license_plate }}
            </label> 
          </ons-list-item>
        </ons-list>
      </ons-page>
    </ons-template>

    <script type="text/ons-template" id="ticketResults.html">
      <ons-page  ng-controller="ticketCollectionController">
        <ons-list>
          <ons-list-item ng-show="!tickets.length">无违章记录</ons-list-item>
          <ons-list-item ng-repeat="ticket in tickets | orderBy: 'date'">
            <div>
              <div class="ticket-date">
                <ons-icon icon="fa-calendar-o"></ons-icon>  {{ticket.date}} <span class="handled" ng-show="ticket.handled=='0'">未处理</span>
              </div>
              <ons-row>
                <ons-col>
                  <div class="ticket-money">
                    <ons-icon icon="fa-money"></ons-icon>  {{ ticket.money }}元
                  </div>
                </ons-col>
                <ons-col>
                  <div class="ticket-fen">
                    <ons-icon icon="fa-minus-circle"></ons-icon>  {{ ticket.fen }}分
                  </div>
                </ons-col>
              </ons-row>
              
              <div class="ticket-area">
                {{ ticket.area }}
              </div>
              <div class="ticket-act">
                {{ticket.code}} {{ ticket.act }}
              </div>
            </div>
          </ons-list-item>
        </ons-list>
        <div class="bottom-bar" style="text-align: center">
          <div class="left navigation-bar__left"><ons-back-button>后退</ons-back-button></div>
          <div class="center navigation-bar__title navigation-bar__center">{{hphm}}</div>
          <div class="right navigation-bar__right">
            <ons-toolbar-button>
              <ons-icon icon="fa-home">
            </ons-toolbar-button>
          </div>
        </div>

      </ons-page>
    </script>    
 

  
</body>
</html>
